﻿<section class="section" id="responsive-table">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#responsive-table">Responsive Table</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24">
            <p>
                Instead of using a table this component uses a list, the grid and columns to layout its items.
            </p>

            <ol class="list-items">
                <li class="list-items-row">
                    <div class="row">
                        <div class="col-md-2">
                            <strong>1</strong>
                        </div>
                        <div class="col-md-6">
                            <a>Link</a>
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4 text-right">
                            <a>Link</a>
                        </div>
                    </div>
                </li>

                <li class="list-items-row">
                    <div class="row">
                        <div class="col-md-2">
                            <strong>2</strong>
                        </div>
                        <div class="col-md-6">
                            <a>Link</a>
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4 text-right">
                            <a>Link</a>
                        </div>
                    </div>
                </li>

                <li class="list-items-row">
                    <div class="row">
                        <div class="col-md-2">
                            <strong>3</strong>
                        </div>
                        <div class="col-md-6">
                            <a>Link</a>
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4">
                            Text
                        </div>
                        <div class="col-md-4 text-right">
                            <a>Link</a>
                        </div>
                    </div>
                </li>
            </ol>

            {{#markdown}}
```xml
<ol class="list-items">
    <li class="list-items-row">
        <div class="row">
            <div class="col-md-2">  <!-- if you want more than one column at a narrow viewport-->
                <strong>1</strong>    <!-- adjust the grid settings appropriately-->
            </div>
            <div class="s-col-6-24">
                <a>Link</a>
            </div>
            <div class="col-md-4">
                Text
            </div>
            <div class="col-md-4">
                Text
            </div>
            <div class="col-md-4">
                Text
            </div>
            <div class="col-md-4">
                <a>Link</a>
            </div>
        </div>
    </li>
</ol>
```
            {{/markdown}}
        </div>
    </div>
</section>
